<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="formInline.goodsId"
          placeholder="请输入商品ID"
          size="mini"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formInline.goodsSn"
          placeholder="请输入商品编号"
          size="mini"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formInline.name"
          placeholder="请输入商品名称"
          size="mini"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
          size="mini"
          icon="el-icon-search"
          >查找</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="addopen"
          size="mini"
          icon="el-icon-edit"
          >添加</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="exportTable"
          size="mini"
          icon="el-icon-download"
          >导出</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button
          type="danger"
          @click="delss"
          size="mini"
          icon="el-icon-delete"
          :disabled="flag"
          >批量删除</el-button
        >
      </el-form-item>
    </el-form>
    <div class="tables">
      <template>
        <el-table
          :data="tableData"
          style="width: 100%"
          highlight-current-row
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品编号">
                  <span>{{ props.row.goodsSn }}</span>
                </el-form-item>
                <el-form-item label="宣传画廊">
                  <!-- <span>{{ props.row.picUrl }}</span> -->
                  <img
                    v-for="item in props.row.gallery"
                    :key="item"
                    :src="item"
                    alt=""
                  />
                </el-form-item>
                <el-form-item label="商品介绍">
                  <span>{{ props.row.brief }}</span>
                </el-form-item>
                <el-form-item label="商品单位">
                  <span>{{ props.row.unit }}</span>
                </el-form-item>
                <el-form-item label="关键字">
                  <span>{{ props.row.keywords }}</span>
                </el-form-item>
                <el-form-item label="类目ID">
                  <span>{{ props.row.categoryId }}</span>
                </el-form-item>
                <el-form-item label="品牌商ID">
                  <span>{{ props.row.brandId }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column label="商品ID" prop="id" align="center">
          </el-table-column>
          <el-table-column label="名称" prop="name" align="center">
          </el-table-column>
          <el-table-column label="图片" prop="picUrl" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.picUrl" alt="" />
            </template>
          </el-table-column>
          <el-table-column label="分享图" prop="desc" align="center">
          </el-table-column>
          <el-table-column label="详情" prop="desc" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="look(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="市场售价" prop="counterPrice" align="center">
          </el-table-column>
          <el-table-column label="当前价格" prop="retailPrice" align="center">
          </el-table-column>
          <el-table-column label="是否新品" prop="isNew" align="center">
            <template slot-scope="scope">
              <el-tag
                size="mini"
                :type="scope.row.isNew ? 'success' : 'primary'"
                disable-transitions
                >{{ scope.row.isNew ? "新品" : "非新品" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="是否热品" prop="isHot" align="center">
            <template slot-scope="scope">
              <el-tag
                size="mini"
                :type="scope.row.isHot ? 'success' : 'primary'"
                disable-transitions
                >{{ scope.row.isHot ? "热品" : "非热品" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="是否在售" prop="isOnSale" align="center">
            <template slot-scope="scope">
              <el-tag
                size="mini"
                :type="scope.row.isOnSale ? 'success' : 'primary'"
                disable-transitions
                >{{ scope.row.isOnSale ? "在售" : "非在售" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            prop="desc"
            align="center"
            min-width="150"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="open1(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="get.page"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="get.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- ========================= -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="55%"
      center
    >
      <div v-html="desc" style="text-align: center"></div>
    </el-dialog>
    <!-- ============================= -->
  </div>
</template>

<script>
import { downloadXlsx } from "../../units/xlx.js";
import { getList, del } from "@/api/commodity/commlist";
export default {
  data() {
    return {
      multipleSelection: [],
      desc: "",
      centerDialogVisible: false,
      total: 0,
      flag: true,
      formInline: {},
      tableData: [],
      get: {
        page: 1,
        limit: 10,
        goodsId: "",
        goodsSn: "",
        name: "",
        sort: "add_time",
        order: "desc",
      },
      total: 0,
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    // 数据获取
    getdata() {
      getList(this.get).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    // 编辑
    handleEdit(row) {
      this.$router.push({
        path: "/product/merchandiseshelf",
        query: {
          id: row.id,
        },
      })
    },
    
    // 删除弹框
    open1(row) {
      this.$confirm("确定删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        this.handleDelete(row)
      });
    },

    // 删除
    handleDelete(row) {
      del(row).then((res) => {
        if (res.errmsg == "成功") {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
          });
          this.getdata();
        }
      });
    },
    // 批量删除的选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
      if (this.multipleSelection.length > 0) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
    // 批量删除按钮
    delss() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.handleDelete(this.multipleSelection[i]);
      }
    },
    // 查询
    onSubmit() {
      this.get.page = 1;
      this.get.goodsId = this.formInline.goodsId;
      this.get.goodsSn = this.formInline.goodsSn;
      this.get.name = this.formInline.name;
      this.getdata();
    },
    // 查看
    look(res) {
      // console.log(res.detail);
      this.desc = res.detail;
      this.centerDialogVisible = true;
    },
    // 添加
    addopen() {
      this.$router.push({
        path: "/product/merchandiseshelf",
      })
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.get.limit = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.get.page = val;
      this.getdata();
    },
    // 导出
    exportTable() {
      let headers = [
        "商品ID",
        "商品编号",
        "名称",
        "专柜价格",
        "当前价格",
        "是否新品",
        "是否热品",
        "是否在售",
        "首页主图",
        "宣传图列表",
        "商品介绍",
        "商品图片",
        "商品单位",
        "关键字",
        "类目ID",
        "品牌ID",
      ];
      let list = [headers];
      for (let i = 0; i < this.tableData.length; i++) {
        let arr = [
          this.tableData[i].id, //商品ID
          this.tableData[i].goodsSn, //商品编号
          this.tableData[i].name, //名称
          this.tableData[i].counterPrice, //专柜价格
          this.tableData[i].retailPrice, //当前价格
          this.tableData[i].isNew, //是否新品
          this.tableData[i].isHot, //是否热品
          this.tableData[i].isOnSale, //是否在售
          this.tableData[i].desc, //首页主图
          this.tableData[i].gallery, //宣传图列表
          this.tableData[i].brief, //商品介绍
          this.tableData[i].picUrl, //商品图片
          this.tableData[i].unit, //商品单位
          this.tableData[i].keywords, //关键字
          this.tableData[i].categoryId, //类目ID
          this.tableData[i].brandId, //品牌ID
        ];
        list.push(arr);
      }
      downloadXlsx(list, "商品信息.xlsx");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table td,
::v-deep .el-table th {
  padding: 4px 0px;
}
.el-table {
  font-size: 12px;
}
.page {
  margin-top: 40px;
  display: flex;
  justify-content: left;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
img {
  width: 40px;
  height: 40px;
}
</style>